import { Component } from 'vue-facing-decorator'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { VxeColumnSlotTypes } from 'vxe-table'
import { Button, Tag } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import type { AnyObject } from '@/types'
import { getInsureEnsurePlanList } from '@/api/insureEnsurePlan'
import { InsurePlanTypeCnEnum, ValidRuleTypeCnEnum } from '@/const/enum'
import type { InsureEnsurePlanListDto } from '@/api/insureEnsurePlan/types'
@Component
export class PeriodInsurView extends TableRender {
    pageTitle = '保险产品'
    renderTitleBtn() { 
        return (
            <Button type="primary" onClick={() => { 
                this.onGoDetail()
            } }><PlusOutlined />新增</Button>
        )
    }
    filterConfig() {
        return {
            companyId: {
                name: '方案简称',
                element: 'input',
                placeholder: '请输入方案简称',
            },
            date : {
                name: '保司名称',
                element: 'select',
                placeholder: '请选择',
                optionsType: 'insureCompanyList'
            },
        }
    }
	
    tableColumnConfigOld = () => [
        {
            field: 'id',
            title: '方案ID',
            params: {
                path: (row) => `/insurance-manage/insurance-product/${row.id}`,
                permission: 'client:insurance-product:detail'
            },
            slots: {
                default: 'toNext'
            }
        },
        {
            field: 'planName',
            title: '方法简称',
        },
        {
            field: 'name',
            title: '关联保司',
        },
        {
            field: 'insurePlanType',
            title: '方案类型',
            formatter: ({row}) => {
                return InsurePlanTypeCnEnum[row.insurePlanType]
            }
        },
        {
            field: 'effectType',
            title: '生效方式',
            formatter: ({row}) => {
                return ValidRuleTypeCnEnum[row.effectType]
            }
        },
        {
            field: 'status',
            title: '状态',
        },
        {
            field: 'createTime',
            title: '创建时间',
            width: 160
        },
        {
            field: 'dangerLevel',
            title: '风险等级',
            width: 200,
            slots: {
                default: ({row}: VxeColumnSlotTypes.ContentSlotParams) => {
                    const colorMap = {
                        3: 'success',
                        4: 'processing',
                        5: 'warning',
                        6: 'error'
                    }
                    return row.dangerLevel.map((item: number) => {
                        return <Tag color={colorMap[item as keyof typeof colorMap]}>{item}类</Tag>
                    })
                }
            }
        }
    ] as TableRenderColumnTypes<InsureEnsurePlanListDto>
	
    onGoDetail() { 
        // 跳转新增页面

        // 跳转详情页
        this.$router.push({
            path: '/insurance-manage/insurance-product-add',
        })
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        return getInsureEnsurePlanList({
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }
	
    render() {
        return <>
            {super.render()}
        </>
    }
}

export default toNative<{}, {}>(PeriodInsurView)